1 19:09:14
<template id="table1">
    <div>

<!--      <table border="1">-->
<!--        <tr>-->
<!--          <th>编号</th>-->
<!--          <th>书名</th>-->
<!--          <th>类型</th>-->
<!--          <th>纸质</th>-->
<!--          <th>出版社</th>-->
<!--          <th>发行商</th>-->
<!--          <th>作者</th>-->
<!--          <th>发行日期</th>-->
<!--          <th>单价</th>-->
<!--          <th>封面</th>-->
<!--          <th>书籍详情</th>-->
<!--          <th>创作背景</th>-->
<!--          <th>发行状态</th>-->
<!--          <th>操作</th>-->
<!--        </tr>-->
<!--        <tr v-for="(index) in list">-->
<!--          <td v-for="(value) in index">{{value}}</td>-->
<!--          <td> <button @click="del(index.id)">删除</button>/-->
<!--            <button @click="update(index)">修改</button></td>-->
<!--        </tr>-->
<!--      </table>-->

      <el-table :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"   :row-style="{height:'100px',width:'20px'}"
                :cell-style="{padding:'0px'}" stripe style="width: 100%;font-size: 15px;max-width: 100%" class="elt1">
        <el-table-column prop="id" label="编号" width="58"/>
        <el-table-column prop="name" label="书名" width="128"/>
        <el-table-column prop="type" label="类型" width="38"/>
        <el-table-column prop="texture" label="纸质" width="38"/>
        <el-table-column prop="publisher" label="出版社" width="38"/>
        <el-table-column prop="brand" label="发行商" width="38"/>
        <el-table-column prop="author" label="作者" width="38"/>
        <el-table-column prop="date" label="发行日期" width="128"/>
        <el-table-column prop="price" label="单价" width="38"/>
        <el-table-column prop="head" label="封面" width="50">
          <img :src="list.head"  style="max-height:200px;"/>

        </el-table-column>
        <el-table-column prop="brief" label="创作背景" width="220" :formatter="stateFormat"/>
        <el-table-column prop="detail" label="书记详情" width="220" :formatter="stateFormat"/>
        <el-table-column  label="发行状态" width="50">
          <span v-if="list.state===1" style="color: slateblue">已发行</span>
          <span v-if="list.state===0">未发行</span>
        </el-table-column>
<!--        <el-table-column label="操作" width="200">-->
<!--                    <el-button type="primary" @click="handleDelete(list.$index, list.row)">删除</el-button>-->
<!--          <el-button type="primary" @click="update(list)">修改</el-button>-->

<!--        </el-table-column>-->
        <!--        <el-table-column prop="name" label="Name" width="180" />-->
        <!--        <el-table-column prop="address" label="Address" />-->
      </el-table>
      <el-pagination align='center'
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[1,5,10,20]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="list.length">
      </el-pagination>
      <div>
        <form style="float: left"  v-show="isShow">
          添加：
          书名: <input v-model="book.name"/><br>
          类型:<input v-model="book.type"><br>
          纸质:<input v-model="book.texture"><br>
          出版社：<input v-model="book.publisher"><br>
          发行商：<input v-model="book.brand"><br>
          作者:<input v-model="book.author"><br>
          日期：<input v-model="book.date"><br>
          单价：<input v-model="book.price"><br>
          封面：<input v-model="book.head"><br>
          书籍详情:<input v-model="book.brief"><br>
          创作背景:<input v-model="book.detail"><br>
          状态:<input v-model="book.state"><br>
          <button type="submit" @click="add()">提交</button>
        </form>
      </div>
      <div>
      <form style="float: left"  v-show="isShow2">
        修改：
        id:<input  v-model="book1.id" disabled/><br>
        书名: <input v-model="book1.name"/><br>
        类型:<input v-model="book1.type"><br>
        纸质:<input v-model="book1.texture"><br>
        出版社：<input v-model="book1.publisher"><br>
        发行商：<input v-model="book1.brand"><br>
        作者:<input v-model="book1.author"><br>
        日期：<input v-model="book1.date"><br>
        单价：<input v-model="book1.price"><br>
        封面：<input v-model="book1.head"><br>
        书籍详情:<input v-model="book1.brief"><br>
        创作背景:<input v-model="book1.detail"><br>
        状态:<input v-model="book1.state"><br>
        <button type="submit" @click="upd()">提交</button>
      </form>
      </div>
    </div>

</template>

<script>
import axios from 'axios'

export default {
  name: 'BooksManager',
  data () {
    return {
      isShow:false,
      isShow2:false,
      list: [],
      book1:{id:"",name:"",type:"",texture:"",publisher:"",brand:"",author:"",date:"",price:"",head:"",brief:"",detail:"",state:""},
      book:{name:"",type:"",texture:"",publisher:"",brand:"",author:"",date:"",price:"",head:"",brief:"",detail:"",state:""},
      currentPage:1,
      pageSize:5
    }
  },
  components:{
    "table1":{
      template:"table1",
      props:{
        list:[],
        title:""
      }
    }
  },
  created() {
    this.$http.post('/book/select').then(data=>{
      this.list = data;
    })
  },
  methods: {
    del (id) {
      //alert(id);
      // var params = new URLSearchParams();
      // params.append('id', '70');
      this.book1.id = id;
      //alert(id);
      this.$http.post("/book/delete", this.book1);
      //$.post("http://localhost:8080/texture/select");
      window.location.reload();
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    add () {
      this.isShow=true;
      this.$http.post("/book/insert", this.book).then(add => {
        //alert(add);
        if (add > 0) {
          alert("添加成功");
          window.location.reload();
        } else {
          alert("添加失败")
        }
      })
    },
    update (item) {
      this.isShow2=true;
      this.book1.id = item.id;
      this.book1.name = item.name;
      this.book1.type = item.type;
      this.book1.texture = item.texture;
      this.book1.publisher = item.publisher;
      this.book1.brand = item.brand;
      this.book1.author = item.author;
      this.book1.date = item.date;
      this.book1.price = item.price;
      this.book1.head = item.head;
      this.book1.brief = item.brief;
      this.book1.detail = item.detail;
      this.book1.state = item.state;
    },
    upd () {
      this.$http.post("/book/update", this.book1).then(add => {
        //alert(add);
        if (add > 0) {
          alert("修改成功");
          window.location.reload();
        } else {
          alert("修改失败")
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    stateFormat(row, column, cellValue) {
      // console.log(row , column , cellValue)
      if (!cellValue) return "";
      if (cellValue.length > 40) {
        //最长固定显示4个字符
        return cellValue.slice(0, 40) + "...";
      }
      return cellValue;
    },
    clickContent: function (row, column, cell, event) {
      clickContent(row, column, cell, event)
      {
        if (column.label === '数据内容') {  // 只有点击数据内容列时才会展开
          row.flag = !row.flag  // 这个参数是当时将数据存储到表格中时特意加上控制表格的展开和省略的
        }
      }
    }

  }
}
</script>

<style scoped>
  .elt1>el-table-column{
    max-width: 100px;
    max-height: 100px;
  }
</style>

<!--<th>编号</th>-->
<!--<th>姓名</th>-->
<!--<th>性别</th>-->
<!--<th>电话</th>-->
<!--<th>邮件</th>-->
<!--<th>密码</th>-->
<!--<th>身份证</th>-->
<!--<th>状态</th>-->
<!--<th>操作</th>-->
